import { ref, computed, onMounted } from "vue";

function useTodo() {
  //传递给todolist的数据
  const todos = ref([]);
  //接收todo-input提交的数据
  const addTodo = (todo) => todos.value.push(todo);

  const fetchTodos = async () => {
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/todos?_limit=5"
    );
    const rawTodos = await response.json();

    todos.value = rawTodos.map((todo) => ({
      id: todo.id,
      content: todo.title,
      completed: todo.completed,
    }));
  };

  onMounted(fetchTodos);

  return {
    todos,
    addTodo,
  };
}

export default useTodo;
